<?php

/**
 * cool模板
 */

use Medoo\DB\SQL;

if (!defined('IN_CRONLITE')) die();
$DB = SQL::DB();
$ClassData = $DB->select('class', '*', [
    'state' => 1,
    'ORDER' => [
        'sort' => 'DESC'
    ]
]);
?>
<!DOCTYPE html>
<html lang="zh" style="font-size: 102.4px;<?= background::image() == false ? 'background:linear-gradient(to left, #70e1f5, #ffd194);' : background::image() ?>">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover,user-scalable=no">
    <script>
        document.documentElement.style.fontSize = document.documentElement.clientWidth / 750 * 40 + "px";
    </script>
    <meta name="format-detection" content="telephone=no">
    <meta name="csrf-param" content="_csrf">
    <title><?= $conf['sitename'] . ($conf['title'] == '' ? '' : ' - ' . $conf['title'])  ?></title>
    <meta name="keywords" content="<?= $conf['keywords'] ?>">
    <meta name="description" content="<?= $conf['description'] ?>">
    <meta name="viewport" content="width=device-width, viewport-fit=cover">
    <link rel="stylesheet" type="text/css" href="<?php echo $cdnserver; ?>assets/template/cool/assets/css/foxui.css">
    <link rel="stylesheet" type="text/css" href="<?php echo $cdnserver; ?>assets/template/cool/assets/css/style.css">
    <link rel="stylesheet" type="text/css" href="<?php echo $cdnserver; ?>assets/template/cool/assets/css/foxui.diy.css">
    <link rel="stylesheet" type="text/css" href="<?php echo $cdnserver; ?>assets/template/cool/assets/css/iconfont.css">
    <link rel="stylesheet" type="text/css" href="<?php echo $cdnserver; ?>assets/template/cool/assets/css/index.css">
    <script src="<?php echo $cdnpublic; ?>jquery/3.4.1/jquery.min.js"></script>
    <link rel="shortcut icon" href="/assets/favicon.ico" type="image/x-icon" />
    <script src="<?php echo $cdnserver; ?>assets/template/cool/assets/js/swiper-3.3.1.min.js" type="text/javascript"></script>
    <link href="<?php echo $cdnserver; ?>assets/layui/css/layui.css" rel="stylesheet" />
</head>
<style type="text/css">
    body {
        position: absolute;
        ;

        margin: auto;
    }

    .fui-page.fui-page-from-center-to-left,
    .fui-page-group.fui-page-from-center-to-left,
    .fui-page.fui-page-from-center-to-right,
    .fui-page-group.fui-page-from-center-to-right,
    .fui-page.fui-page-from-right-to-center,
    .fui-page-group.fui-page-from-right-to-center,
    .fui-page.fui-page-from-left-to-center,
    .fui-page-group.fui-page-from-left-to-center {
        -webkit-animation: pageFromCenterToRight 0ms forwards;
        animation: pageFromCenterToRight 0ms forwards;
    }
</style>
<style>
    .fix-iphonex-bottom {
        padding-bottom: 34px;
    }
</style>
<style>
    .fui-goods-item .detail .price .buy {
        color: #fff;
        background: #1492fb;
        border-radius: 3px;
        line-height: 1.1rem;
    }

    .goods-category {
        display: flex;
        background: #fff;
        flex-wrap: wrap;
    }

    .goods-category li {
        width: 25%;
        list-style: none;
        margin: 0.4rem 0;
        color: #666;
        font-size: 0.65rem;

    }

    .goods-category li.active p {
        background: #1492fb;
        color: #fff;
    }

    body {
        padding-bottom: constant(safe-area-inset-bottom);
        padding-bottom: env(safe-area-inset-bottom);
    }

    .goods-category li p {
        width: 4rem;
        height: 2rem;
        text-align: center;
        line-height: 2rem;
        border: 1px solid #ededed;
        margin: 0 auto;
        -webkit-border-radius: 0.1rem;
        -moz-border-radius: 0.1rem;
        border-radius: 0.1rem;
    }


    .CouponCss {
        margin-bottom: 0.2em;
    }

    .CouponCss .layui-card {
        padding: 0;
        box-shadow: 3px 3px 12px #ddd;
        cursor: pointer;
        transition: all .6s;
        overflow: hidden;
        border-radius: 0.3em;
    }

    .CouponCss .layui-card:hover {
        box-shadow: 3px 3px 18px rgb(187, 184, 184);
    }

    .CouponCss img {
        width: 3em;
        height: 3em;
        display: block;
        margin: 0.5em auto;
    }

    .CouponCss ul {
        padding: 0;
        margin: 0;
    }

    .CouponCss ul li {
        font-size: 0.6em;
        color: rgba(0, 0, 0, 0.527);
    }

    .Coupons {
        position: fixed;
        bottom: 20%;
        right: 5%;
        width: 3rem;
        height: 3rem;
        z-index: 100;
        cursor: pointer;
        color: red;
        text-align: center;
        animation: Coupons 2s 0.2s linear infinite alternate;
    }

    .Coupons img {
        width: 3rem;
        height: 3rem;
    }

    @keyframes Coupons {
        0% {
            transform: scale(1);
        }

        25% {
            transform: scale(1.3);
        }

        50% {
            transform: scale(1);
        }

        75% {
            transform: scale(1.3);
        }
    }
</style>


<body ontouchstart="" style="overflow: auto;height: auto !important;max-width: 650px;">
    <div id="body">
        <div class="fui-page-group " style="height: auto">
            <div class="fui-page  fui-page-current " style="height:auto; overflow: inherit">
                <div class="fui-content navbar" id="container" style="background-color: #fafafc;overflow: inherit">
                    <div class="default-items">
                        <div class="fui-swipe">
                            <style>
                                .fui-swipe-page .fui-swipe-bullet {
                                    background: #ffffff;
                                    opacity: 0.5;
                                }

                                .fui-swipe-page .fui-swipe-bullet.active {
                                    opacity: 1;
                                }
                            </style>
                            <div class="fui-swipe-wrapper" style="transition-duration: 500ms;">
                                <?php
                                $banner = explode('|', $conf['banner']);
                                foreach ($banner as $v) {
                                    $image_url = explode('*', $v);
                                    echo '<a class="fui-swipe-item" href="' . $image_url['1'] . '">
                                <img src="' . $image_url['0'] . '" style="display: block; width: 100%; height: auto;" />
                            </a>';
                                }
                                ?>
                            </div>
                            <div class="fui-swipe-page right round" style="padding: 0 5px; bottom: 5px; ">
                            </div>
                        </div>
                        <div class="fui-notice">
                            <div class="image">
                                <img src="<?php echo $cdnserver; ?>assets/template/cool/assets/picture/1571065042489353.jpg">
                            </div>
                            <div class="text" style="height: 1.2rem;line-height: 1.2rem">
                                <ul>
                                    <li><a href="JavaScript:void(0)" onclick="$('.tzgg4').show()">
                                            <marquee behavior="alternate">
                                                <span style="color:red">平台24小时自助下单，欢迎代理加盟~</span>
                                            </marquee>
                                        </a></li>
                                </ul>
                            </div>
                        </div>
                        <form action="" method="get">
                            <div class="fui-searchbar bar">
                                <div class="searchbar center searchbar-active" style="padding-right:2.5rem">
                                    <input type="button" class="searchbar-cancel searchbtn" value="搜索" onclick="soso()">
                                    <div class="search-input" style="border: 0px;padding-left:0px;padding-right:0px;">
                                        <i class="icon icon-search"></i>
                                        <input type="search" class="search" value="" name="name" placeholder="输入商品关键字..." id="name">
                                    </div>
                                </div>
                            </div>
                            <script>
                                function soso() {
                                    var seek = $('#name').val();
                                    window.location.href = "/?name=" + seek;
                                }
                            </script>
                        </form>
                        <div class="device" style="padding-bottom:20px">
                            <div class="swiper-container list-guanggaowei-horizontal">
                                <div class="swiper-wrapper" style="transform: translate3d(0px, 0px, 0px); transition-duration: 0ms;">
                                    <?php
                                    $arry = 0;
                                    $au = 1;
                                    foreach ($ClassData as $v) {
                                        if (($arry / 10) == ($au - 1)) {
                                            echo '<div class="swiper-slide swiper-slide-visible swiper-slide-prev" data-swiper-slide-index="' . $au . '" style="width: 375px;margin: auto;margin-top: 0px;">
                                        <div class="content-slide">';
                                        }
                                        echo '<a href="?cid=' . $v['cid'] . '">
                                               <div class="mbg">
                                                   <p class="ico"><img src="' . $v['image'] . '" onerror="this.src=\'/template/cool/assets/picture/1562225141902335.jpg\'"></p>
                                                   <p class="icon-title">' . $v['name'] . '</p>
                                              </div>
                                          </a>';
                                        if ((($arry + 1) / 10) == ($au)) {
                                            echo '</div>
                                        </div>';
                                            $au++;
                                            $_SESSION['au'] = $au;
                                        }
                                        $arry++;
                                        $_SESSION['arry'] = $arry;
                                    }
                                    if (floor((($_SESSION['arry']) / 10)) != (($_SESSION['arry']) / 10)) {
                                        echo '</div></div>';
                                    }
                                    ?>
                                </div>

                                <div class="pagination swiper-pagination-clickable swiper-pagination-bullets">
                                    <span class="swiper-pagination-bullet"></span>
                                    <span class="swiper-pagination-bullet"></span>
                                    <span class="swiper-pagination-bullet"></span>
                                    <span class="swiper-pagination-bullet"></span>
                                </div>

                            </div>
                        </div>
                        <script>
                            jQuery(function($) {
                                $(window).resize(function() {
                                    var width = $('#js-com-header-area').width();
                                    $('.touchslider-item a').css('width', width);
                                    $('.touchslider-viewport').css('height', 200 * (width / 640));
                                }).resize();
                            });
                            if ($(".swiper-wrapper .content-slide").length > 1) {
                                $(".device").css("padding-bottom", "20px");
                                $(".pagination").show();
                                var mySwiper = new Swiper('.swiper-container', {
                                    pagination: '.pagination',
                                    loop: true,
                                    grabCursor: true,
                                    autoplay: 100000000,
                                    autoplayDisableOnInteraction: false,
                                    paginationClickable: true
                                })
                            }
                        </script>


                        <div style="height: 1px"></div>
                    </div>
                    <div class="fui-notice">
                        <div class="text" style="height: 1.2rem;line-height: 1.2rem">
                            <ul>
                                <li onclick="$('.tzgg5').show()"><a href="JavaScript:void(0)">
                                        <marquee direction="up" behavior="alternate">
                                            <div align="center">
                                                <font color="#FF0000">点</font>
                                                <font color="#D5002A">击</font>
                                                <font color="#AB0054">这</font>
                                                <font color="#81007E">里</font>
                                                <font color="#5700A8">查</font>
                                                <font color="#2D00D2">看</font>
                                                <font color="#0000FF">商</font>
                                                <font color="#2A00D5">品</font>
                                                <font color="#5400AB">下</font>
                                                <font color="#7E0081">单</font>
                                                <font color="#A80057">说</font>
                                                <font color="#D2002D">明</font>
                                            </div>
                                        </marquee>
                                    </a></li>
                            </ul>
                        </div>
                    </div>
                    <div class="fui-goods-group block three" style="background: #f3f3f3;">
                        <div id="GoodsApp">
                            <div class="Coupons" @click="Coupon" style="display: none;" :style="CouponData.length>=1?'display:block;':'display: none;'" title="领取惊喜优惠券！">
                                <img src="/assets/img/coupon_5.png" />
                                <br>
                                <span style="font-size: 0.5em;">{{ (type==3?'惊喜优惠券':'分类优惠券') }}</span>
                            </div>
                            <a v-for="(item,index) in GoodsData" class="fui-goods-item" :href="'?mod=shop&gid=' + item.gid">
                                <div class="image" :style="'background-image: url('+(item.image==''?'':item.image)+'); background-size: 100% 100%'"></div>
                                <div class="detail">
                                    <div class="name" style="color: #000000;">
                                        {{ (item.quota==0?'库存不足':'剩余'+item.quota + '份') }}
                                        <div class="layui-elip" style="width:100%">{{ item.name }}</div>
                                    </div>
                                    <div class="price" style="margin-top: 0.9rem;">
                                        <span class="text" style="color: #ff5555;">
                                            <p class="minprice" v-html="Price(item)"></p>
                                        </span>
                                        <span v-if="item.price == 0" class="buy" style="background-color: yellowgreen;color:#fff;position: absolute;    right: 0;">领取</span>
                                        <span v-if="item.price > 0" class="buy" style="color:#fff;position: absolute;    right: 0;">购买</span>
                                    </div>
                                </div>
                            </a>

                            <div class="footer" style="width:100%; margin-top:0.5rem;margin-bottom:2.5rem;display: block;">
                                <ul>
                                    <li> 版权归@<?php echo $conf['sitename'] ?>所有</li>
                                </ul>
                                <p style="text-align: center"><?php echo $conf['statistics'] ?></p>
                                <p style="text-align: center"><?php echo $conf['notice_bottom'] ?></p>
                            </div>

                        </div>
                        <style>
                            .footer ul {
                                display: flex;
                                width: 80%;
                                margin: 0 auto;
                            }

                            .footer ul li {
                                list-style: none;
                                flex: 1;
                                text-align: center;
                                position: relative;
                                line-height: 2rem;
                            }

                            .footer ul li:after {
                                content: '';
                                position: absolute;
                                right: 0;
                                top: .8rem;
                                height: 10px;
                                border-right: 1px solid #999;


                            }

                            .footer ul li:nth-last-of-type(1):after {
                                display: none;
                            }

                            .footer ul li a {
                                color: #999;
                                display: block;
                                font-size: .6rem;
                            }
                        </style>

                    </div>
                </div>
                <div class="fui-navbar" style="bottom:-34px;background-color: white;max-width: 650px">
                </div>
                <div class="fui-navbar" style="max-width: 650px">
                    <a href="index.php" class="nav-item  "> <span class="icon icon-home"></span> <span class="label">首页</span>
                    </a>
                    <a href="/?mod=query" class="nav-item "> <span class="icon icon-dingdan1"></span> <span class="label">订单</span> </a>
                    <a href="/?mod=kf" class="nav-item "> <span class="icon icon-qq"></span> <span class="label">客服</span> </a>

                    <a href="/user/" class="nav-item "> <span class="icon icon-person2"></span> <span class="label">会员中心</span> </a>
                </div>

                <div style="width: 100%;height: 100vh;position: fixed;top: 0px;left: 0px;opacity: 0.5;background-color: black;display: none;z-index: 10000" class="tzgg2"></div>
                <div class="tzgg2" type="text/html" style="display: none">
                    <div class="account-layer" style="z-index: 100000000;">
                        <div class="account-main" style="padding:0.8rem;height: auto">

                            <div class="account-title">系 统 公 告</div>

                            <div class="account-verify" style="  display: block;    max-height: 15rem;    overflow: auto;margin-top: -10px">
                                <?= $conf['notice_top'] ?>
                            </div>
                        </div>
                        <div class="account-btn" style="display: block" onclick="gbtzgg2()">确认</div>
                        <!--<div class="account-close">-->
                        <!--<i class="icon icon-guanbi1"></i>-->
                        <!--</div>-->
                    </div>
                </div>

                <div style="width: 100%;height: 100vh;position: fixed;top: 0px;left: 0px;opacity: 0.5;background-color: black;display: none;z-index: 10000" class="tzgg3"></div>
                <div class="tzgg3" type="text/html" style="display: none">
                    <div class="account-layer" style="z-index: 100000000;">
                        <div class="account-main" style="padding:0rem;height: auto">

                            <div class="account-title" style="height: 2rem;border-bottom: 1px solid #d3d7d4;background: #F2F2F2;border-top-right-radius:0.25rem;border-top-left-radius:0.25rem">
                                系 统 公 告
                            </div>

                            <div class="account-verify" style="    display: block;    max-height: 15rem;    overflow: auto;margin-top: 10px;padding: 0px 0.8rem;margin-bottom: 10px">
                                <?= $conf['notice_top'] ?>
                            </div>
                        </div>
                        <div class="account-btn" style="display: block" onclick="gbtzgg3()">确认</div>
                        <!--<div class="account-close">-->
                        <!--<i class="icon icon-guanbi1"></i>-->
                        <!--</div>-->
                    </div>
                </div>

                <div style="width: 100%;height: 100vh;position: fixed;top: 0px;left: 0px;opacity: 0.5;background-color: black;display: none;z-index: 10000" class="tzgg4"></div>
                <div class="tzgg4" type="text/html" style="display: none">
                    <div class="account-layer" style="z-index: 100000000;">
                        <div class="account-main" style="padding:0rem;height: auto">

                            <div class="account-title" style="height: 2rem;border-bottom: 1px solid #d3d7d4;background: #F2F2F2;border-top-right-radius:0.25rem;border-top-left-radius:0.25rem">
                                平 台 公 告
                            </div>

                            <div class="account-verify" style="    display: block;    max-height: 15rem;    overflow: auto;margin-top: 10px;padding: 0px 0.8rem;margin-bottom: 10px">
                                <?= $conf['notice_top'] ?>
                            </div>
                        </div>
                        <div class="account-btn" style="display: block" onclick="$('.tzgg4').hide()">确认</div>
                        <!--<div class="account-close">-->
                        <!--<i class="icon icon-guanbi1"></i>-->
                        <!--</div>-->
                    </div>
                </div>
                <div style="width: 100%;height: 100vh;position: fixed;top: 0px;left: 0px;opacity: 0.5;background-color: black;display: none;z-index: 10000" class="tzgg5"></div>
                <div class="tzgg5" type="text/html" style="display: none">
                    <div class="account-layer" style="z-index: 100000000;">
                        <div class="account-main" style="padding:0rem;height: auto">

                            <div class="account-title" style="height: 2rem;border-bottom: 1px solid #d3d7d4;background: #F2F2F2;border-top-right-radius:0.25rem;border-top-left-radius:0.25rem">
                                下 单 须 知
                            </div>

                            <div class="account-verify" style="    display: block;    max-height: 15rem;    overflow: auto;margin-top: 10px;padding: 0px 0.8rem;margin-bottom: 10px">
                                <?= $conf['PopupNotice'] ?>
                            </div>
                        </div>
                        <div class="account-btn" style="display: block" onclick="$('.tzgg5').hide()">确认</div>
                        <!--<div class="account-close">-->
                        <!--<i class="icon icon-guanbi1"></i>-->
                        <!--</div>-->
                    </div>
                </div>
            </div>
        </div>
        <script>

        </script>

        <script src="<?php echo $cdnserver; ?>assets/template/cool/assets/js/foxui.js"></script>
        <script src="<?php echo $cdnserver; ?>assets/template/cool/assets/js/core.js"></script>
        <script src="<?php echo $cdnserver; ?>assets/layui/layui.all.js"></script>
        <script>
            var cid = <?= (empty($_QET['cid']) ? -1 : $_QET['cid']) ?>;
        </script>
        <script src="<?php echo $cdnserver; ?>assets/js/vue3.js"></script>
        <script src="<?php echo $cdnserver; ?>assets/template/cool/assets/js/index.js?vs=<?= $accredit['versions'] ?>"></script>
</body>

</html>